<template>
  <el-card class="data-container">
    <el-skeleton :rows="13" animated :loading="loading">
      <template #default>
        <div class="analysis-title">
          <div class="btn-pos">
            <el-button type="primary" size="default" @click="downloadExcel"
              ><el-icon><Download /></el-icon>下载</el-button
            >
            <el-button type="success" size="default" @click="uploadExcel"
              ><el-icon><Upload /></el-icon>上传</el-button
            >
          </div>
          <span> 基于决策树的数据分类</span>
        </div>
        <el-table
          :data="tableData"
          border
          :summary-method="getAverage"
          show-summary
          fit
          sum-text="平均值"
        >
          <el-table-column
            type="index"
            label="id"
            align="center"
            width="70"
            sortable
          />
          <el-table-column
            v-for="(option, index) in options"
            :key="index"
            :prop="option.prop"
            :label="option.label"
            align="center"
            :width="option.width"
            :sortable="option.sortable"
          >
            <template v-slot="{ row }" v-if="option.label === '人体红外'">
              <el-tag
                effect="dark"
                class="ml-2"
                :type="row.metalDetection === 0 ? 'warning' : 'success'"
                >{{ row.metalDetection === 0 ? '无人' : '有人' }}</el-tag
              >
            </template>
            <template v-slot="{ row }" v-else-if="option.label === '金属探测'">
              <el-tag
                effect="dark"
                class="ml-2"
                :type="row.metalDetection === 0 ? 'warning' : 'success'"
                >{{ row.metalDetection === 0 ? '无' : '有' }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-skeleton>
  </el-card>
  <div class="dialog-analysis">
    <Dialog v-model="dialogVisible" v-if="dialogVisible" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAnalysisData } from '@/api/facility.js'
import { ElMessage } from 'element-plus'
import { options } from './options'
import { exportExcel as excelExport } from '@/api/facility.js'
import Dialog from './components/dialog.vue'

const dialogVisible = ref(false)

const url = ref('')

const excel = ref(null)

const loading = ref(true)

const tableData = ref([])

const getAverage = (param) => {
  const { columns, data } = param
  // console.log(param)
  const sums = []
  // 遍历列
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '平均值'
      return
    }
    // 获取单列数据数组
    const values = data.map((item) => Number(item[column.property]))
    // 对单列数据累加后请求平均
    if (
      !values.every((value) => isNaN(value)) &&
      values.every((value) => value !== 1 || value !== 1)
    ) {
      const res = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      return (sums[index] = (res / data.length).toFixed(6))
    } else {
      sums[index] = ''
    }
  })
  return sums
}

const initTableData = async () => {
  try {
    const res = await getAnalysisData()
    tableData.value = res.data
    loading.value = false
    // console.log(res)
  } catch (error) {
    ElMessage.error(error)
  }
}

initTableData()

const downloadExcel = async () => {
  // 这块写完整url
  window.location.href = '/api/fmms/dataDisplayController/exportExcel'
}
const uploadExcel = () => {
  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.title-btn {
  text-align: center;
  width: 100%;
  .btn-container {
    display: inline-block;
  }
}
.data-container {
  height: 550px;
  overflow: auto;
  .analysis-title {
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    .btn-pos {
      position: absolute;
    }
  }
}
.dialog-analysis {
  :deep(.el-dialog) {
    width: 400px;
  }
}
</style>
